jQuery浏览器功能测试support -- DOM测试（15个）源码分析

其中为1.1~1.15 15个DOM兼容性测试

jQuery.support = (function() {

    var support,
        all,
        a,
        select,
        opt,
        input,
        marginDiv,
        fragment,
        tds,
        events,
        eventName,
        i,
        isSupported,
        div = document.createElement( "div" ),
        documentElement = document.documentElement;

    // Preliminary tests
    div.setAttribute("className", "t");
    div.innerHTML = "   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";

    all = div.getElementsByTagName( "*" );
    a = div.getElementsByTagName( "a" )[ 0 ];

    // Can't get basic test support
    if ( !all || !all.length || !a ) {
        return {};
    }

    // First batch of supports tests
    select = document.createElement( "select" );
    opt = select.appendChild( document.createElement("option") );
    input = div.getElementsByTagName( "input" )[ 0 ];

    support = {
        // IE strips leading whitespace when .innerHTML is used
        // 1.1. 检测第一个子元素是否是文本节点
        leadingWhitespace: ( firstChild.div.nodeType === 3 ),

        // Make sure that tbody elements aren't automatically inserted
        // IE will insert them into empty tables
        // 1.2 按照HTML规范，子元素tbody是可选的，因此在大部分浏览器中，测试项tbody为true, 而在IE6, IE7中，浏览器会自动为空table元素插入空tbody元素。如果浏览器自动插入tbody元素，则个数为1，测试项tbody为false;如果不自动插入，则个数为0，测试项tbody为true
        tbody: !div.getElementsByTagName("tbody").length,

        // Make sure that link elements get serialized correctly by innerHTML
        // This requires a wrapper element in IE
        // 1.3 如果浏览器能正确的序列化link标签，则个数为1,测试项htmlSerialize为true, 否则为false
        htmlSerialize: !!div.getElementsByTagName("link").length,

        // Get the style information from getAttribute
        // (IE uses .cssText instead)
        style: /top/.test( a.getAttribute("style") ),

        // Make sure that URLs aren't manipulated
        // (IE normalizes it by default)
        // 1.4 如果通过原生方法getAttribute("href")的返回值与设置的相对路劲是否相等，来测试测试项hrefNormalized为true
        hrefNormalized: ( a.getAttribute("href") === "/a" ),

        // Make sure that element opacity exists
        // (IE uses filter instead)
        // Use a regex to work around a WebKit issue. See #5145
        opacity: /^0.55/.test( a.style.opacity ),

        // Verify style float existence
        // (IE uses styleFloat instead of cssFloat)
        cssFloat: !!a.style.cssFloat,

        // Make sure that if no value is specified for a checkbox
        // that it defaults to "on".
        // (WebKit defaults to "" instead)
        // 1.5 如果复选框的属性value的默认值是"on"，则测试项checkOn为true
        // 在safari中，复选框的属性value的默认值是空字符串，此时测试项checkOn为false; 在其他浏览器中，默认值是字符串"on"，此时测试项checkOn为true
        checkOn: ( input.value === "on" ),

        // Make sure that a selected-by-default option has a working selected property.
        // (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
        // 在IE和早期的Safari中，默认选中的option元素的属性seleted为false, 测试项optSelected为false,
        optSelected: opt.selected,

        // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
        // 1.9 如果原生方法getAttribute()、setAttribute()、removeAttribute()可以正确地设置、读取和移除HTML属性。则测试项getSetAttribute为true
        // 在IE6， IE7中，执行方法getAttribute()、setAttribute()、removeAttribute()时需要传入DOM属性作为参数而不是HTML属性，此时测试项getSetAttribute为false
        getSetAttribute: div.className !== "t",

        // Tests for enctype support on a form(#6743)
        // 1.11 如果表单元素支持属性enctype, 则测试项enctype为true
        // 属性enctype用于规定在将表单数据发送到服务器之前应该如何对其进行编码，它与属性encoding是等价的，但是在一些老版本里的浏览器中只支持属性encoding
        // 这里通过两个逻辑非运算符(!)把属性enctpe的值转换为布尔值。
        enctype: !!document.createElement("form").enctype,

        // Makes sure cloning an html5 element does not cause problems
        // Where outerHTML is undefined, this still works
        // 1.12 如果浏览器能够正确地复制HTML5元素，则测试项HTML5Clone为true
        // 在IE6， IE7， IE8中，无法正确地复制HTML5元素，测试项html5Clone为false, 在IE9+和其他浏览器中则为true
        html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",

        // Will be defined later
        submitBubbles: true,
        changeBubbles: true,
        focusinBubbles: false,
        deleteExpando: true,
        noCloneEvent: true,
        inlineBlockNeedsLayout: false,
        shrinkWrapBlocks: false,
        reliableMarginRight: true
    };

    // Make sure checked status is properly cloned
    input.checked = true;
    // 1.6 在IE 中，复制DOM元素时不会复制属性checked, 测试项noCloneChecked为false,在其他浏览器中，会复制属性checked, 测试项noCloneChecked为true
    support.noCloneChecked = input.cloneNode( true ).checked;

    // Make sure that the options inside disabled selects aren't marked as disabled
    // (WebKit marks them as disabled)
    select.disabled = true;
    // 1.8 在早期的Safari中，如果元素select被禁用，则子元素option会被自动禁用，此时测试项optDisabled为false; 在其他浏览器中，则不会自被自动禁用，测试项optDisabled则为true
    support.optDisabled = !opt.disabled;

    // Test to see if it's possible to delete an expando from an element
    // Fails in Internet Explorer
    // 1.10 如果浏览器允许删除DOM元素的属性，则测试项delteEXpando为true
    // 在IE6， IE7， IE8中，删除DOM元素上的属性会抛出异常，此时测试项deleteExpando为false
    // 尝试在div元素上执行delete div.test, 如果抛出异常，则测试项deleteExpando为false
    try {
        delete div.test;
    } catch( e ) {
        support.deleteExpando = false;
    }

    if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
        div.attachEvent( "onclick", function() {
            // Cloning a node shouldn't copy over any
            // bound event handlers (IE does this)
            support.noCloneEvent = false;
        });
        div.cloneNode( true ).fireEvent( "onclick" );
    }

    // Check if a radio maintains its value
    // after being appended to the DOM
    // 1.13 如果设置input元素的属性type为"radio"不会导致属性value的值丢失，则测试项radioValue为true
    // 在IE中，设置input元素的属性type为"radio"会导致属性value的值丢失，测试项radioValue为false, 在其他浏览器中则为true
    input = document.createElement("input");
    input.value = "t";
    input.setAttribute("type", "radio");
    support.radioValue = input.value === "t";
    // 如果浏览器再文档片段中能正确复制单选按钮和复选框的选中状态（即属性checked），则测试项checkClone为true
    // 在IE6， IE7中，复制文档片段会丢失其中单选按钮和复选框的属性checked，此时测试项checkClone为false, 在IE8+和其他浏览器中则为true
    input.setAttribute("checked", "checked");
    div.appendChild( input );
    fragment = document.createDocumentFragment();
    fragment.appendChild( div.lastChild );

    // WebKit doesn't clone checked state correctly in fragments
    support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;

    // Check if a disconnected checkbox will retain its checked
    // value of true after appended to the DOM (IE6/7)
    // 1.15已选中的单选按钮和复选按框添加到DOM树中后，如果仍然为选中状态，则测试项appendChecked为true
    // 在IE6， IE7中，把已选中的单选按钮和复选框添加到DOM树中后会丢失选中状态，测试项appendChecked为false
    support.appendChecked = input.checked;

    fragment.removeChild( input );
    fragment.appendChild( div );

    div.innerHTML = "";

    // Check if div with explicit width and no margin-right incorrectly
    // gets computed margin-right based on width of container. For more
    // info see bug #3333
    // Fails in WebKit before Feb 2011 nightlies
    // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
    if ( window.getComputedStyle ) {
        marginDiv = document.createElement( "div" );
        marginDiv.style.width = "0";
        marginDiv.style.marginRight = "0";
        div.style.width = "2px";
        div.appendChild( marginDiv );
        support.reliableMarginRight =
            ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
    }

    // Technique from Juriy Zaytsev
    // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
    // We only care about the case where non-standard event systems
    // are used, namely in IE. Short-circuiting here helps us to
    // avoid an eval call (in setAttribute) which can cause CSP
    // to go haywire. See: https://developer.mozilla.org/en/Security/CSP
    if ( div.attachEvent ) {
        for( i in {
            submit: 1,
            change: 1,
            focusin: 1
        }) {
            eventName = "on" + i;
            isSupported = ( eventName in div );
            if ( !isSupported ) {
                div.setAttribute( eventName, "return;" );
                isSupported = ( typeof div[ eventName ] === "function" );
            }
            support[ i + "Bubbles" ] = isSupported;
        }
    }

    fragment.removeChild( div );

    // Null elements to avoid leaks in IE
    fragment = select = opt = marginDiv = div = input = null;

    return support;
})();